<template>
  <div class="setting">
    <el-card class="mycard">
      <el-tabs v-model="active" @update="getRole">
        <el-tab-pane label="角色管理" name="frist">
          <el-button size="mini" type="primary" @click="showPanle"><i class="el-icon-plus" />新增角色</el-button>
          <el-table :data="list" style="width:100%" border>
            <el-table-column label="序号" type="index" />
            <el-table-column prop="name" label="角色名称" />
            <el-table-column prop="description" label="描述" />
            <el-table-column label="操作">
              <template slot-scope="scope">

                <el-button type="text" @click="distribution(scope.row)">分配</el-button>
                <el-button type="text" @click="showPanle(scope.row)">修改</el-button>
                <el-button type="text" @click="delData(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="sizeChange"
            @current-change="currentChange"
          />
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second" class="company">
          <el-form>
            <el-form-item label="企业名称" label-width="100px">
              <el-input v-model="companyInfo.name" disabled />
            </el-form-item>
            <el-form-item label="公司地址" label-width="100px">
              <el-input v-model="companyInfo.companyAddress" disabled />
            </el-form-item>
            <el-form-item label="公司电话" label-width="100px">
              <el-input v-model="companyInfo.companyPhone" disabled />
            </el-form-item>
            <el-form-item label="邮箱" label-width="100px">
              <el-input v-model="companyInfo.mailbox" disabled />
            </el-form-item>
            <el-form-item label="备注" label-width="100px">
              <el-input v-model="companyInfo.remarks" disabled />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <addset
        ref="addset"
        :show-dialog="showDialog"
        :current-item="currentItem"
        :get-panle-name="getPanleName"
        @closeDialog="cancel"
        @update="getRole"
      />
      <setrole
        ref="setrole"
        :showdialog.sync="showdialog"
        :roleinfo="roleInfo"
      />
    </el-card>
  </div>
</template>

<script>
import { getRoles, delRole, getCompany } from '@/api/setting'
import addset from './components/add-set.vue'
export default {
  components: {
    addset,
    setrole: () => import('@/views/setting/components/setrole.vue')
  },
  data() {
    return {
      active: 'frist',
      // 当前页
      currentPage: 1,
      total: 0,
      pageSizes: [2, 4, 5, 6],
      // 页容量
      pageSize: 2,
      list: [],
      // 新增面板显示
      showDialog: false,
      // 分配权限面板显示
      showdialog: false,
      currentItem: '',
      companyInfo: {},
      // 点击角色信息
      roleInfo: '',
      id: ''
    }
  },
  computed: {
    getPanleName() {
      return this.currentItem.id ? '编辑角色' : '新增角色'
    }
  },
  created() {
    this.getRole()
    this.companyGet()
  },
  methods: {
    // 分配权限点击
    distribution(roleinfo) {
      this.showdialog = true
      this.roleInfo = roleinfo
      this.id = roleinfo.id
      console.log(this.id)
      this.$refs.setrole.getPerById(this.id)
    },
    // 获取公司信息
    async companyGet() {
      const companyID = this.$store.getters.userInfo.companyId
      const res = await getCompany(companyID)
      console.log(res)
      this.companyInfo = res
    },
    // 取消操纵
    cancel(val) {
      this.showDialog = val
    },
    // 删除按钮
    async delData(id) {
      await this.$confirm('是否删除角色', '提示')
      await delRole(id)
      this.$message.success('删除成功')
      if (this.list.length <= 1) {
        this.currentPage = 1
      }
      this.getRole()
    },
    // 显示编辑面板
    showPanle(item, type) {
      this.showDialog = true
      console.log(item)
      this.currentItem = item
      if (this.currentItem.id) {
        this.$refs.addset.form = { ...this.currentItem }
      } else {
        console.log('add')
      }
    },
    async getRole() {
      // 获取所有角色列表,传入当前页码，页容量
      const res = await getRoles({ page: this.currentPage, pagesize: this.pageSize })
      this.list = res.rows
      this.total = res.total
    },
    // 页容量发生改变
    sizeChange(size) {
      // size改变之后的页容量
      this.pageSize = size
      this.getRole()
    },
    // 当前页发生改变
    currentChange(size) {
      // size
      this.currentPage = size
      this.getRole()
    }
  }
}
</script>

<style lang="scss">
        .setting{
        padding: 20px;
        .mycard{
        padding: 20px 40px;
        .el-pagination{
        text-align: right;
        }
        .el-form-item{
        width: 500px;
        }
        }
        }
        </style>

